/* Author:DAN || Version:1.0.0 || PluginName:Room3D */
.Scene3D * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
    outline: 0;
    -webkit-tap-highlight-color: transparent
}

.Scene3D {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    background: linear-gradient(to bottom,#a0a0a0,#e7e7e7)
}

.Scene3D_Wraper {
    position: absolute;
    left: 50%;
    top: 50%
}

.Scene3D_Ground {
    width: 100%;
    height: 100%;
    background: #c9c9c9;
    position: relative;
    transform-style: preserve-3d;
    transform-origin: center center 0
}

.Scene3D_Grid {
    width: 3000px;
    height: 3000px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -1500px;
    margin-top: -1500px;
    transform: translateZ(-1px)
}

.Scene3D_Grid .sceneGrid {
    border: solid 1px rgba(150,150,150,0.4);
    position: absolute;
    box-shadow: 0 0 1px rgba(150,150,150,0.4)
}

.Scene3D_Grid .SceneGrid_H {
    width: 100%;
    height: 1px
}

.Scene3D_Grid .SceneGrid_V {
    width: 1px;
    height: 100%
}

.Room3D_room {
    position: absolute;
    transform-style: preserve-3d
}

.Room3D_floor {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0
}

.Room3D_wall {
    position: absolute;
    height: 0;
    transform-style: preserve-3d
}

.Room3D_wall div.Room3D_wall_main {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    transform-style: preserve-3d
}

.Room3D_wall div.Room3D_wall_main>span {
    display: block;
    width: 100%;
    height: 100%
}

.Room3D_wall_left {
    left: 0;
    bottom: 0;
    transform-origin: left bottom 0;
    transform: rotateX(-90deg) rotateY(90deg)
}

.Room3D_wall_right {
    right: 0;
    bottom: 0;
    transform-origin: right bottom 0;
    transform: rotateX(-90deg) rotateY(-90deg)
}

.Room3D_wall_fore {
    left: 0;
    bottom: 0;
    transform-origin: center bottom 0;
    transform: rotateX(-90deg) rotateY(180deg)
}

.Room3D_wall_back {
    left: 0;
    top: 0;
    transform-origin: center bottom 0;
    transform: rotateX(-90deg)
}

.Room3D_door {
    position: absolute;
    bottom: 0;
    transform-style: preserve-3d;
    border-bottom: none !important;
    transform: translateZ(0.1px)
}

.Room3D_door div {
    transition: transform .3s linear
}

.Room3D_door div.Room3D_door_single {
    width: 100%;
    height: 100%
}

.Room3D_door.Room3D_door_inside.Room3D_door_open div.Room3D_door_single.Room3D_door_left {
    transform: rotateY(-90deg)
}

.Room3D_door.Room3D_door_inside.Room3D_door_open div.Room3D_door_single.Room3D_door_right {
    transform: rotateY(90deg)
}

.Room3D_door.Room3D_door_outside.Room3D_door_open div.Room3D_door_single.Room3D_door_left {
    transform: rotateY(90deg)
}

.Room3D_door.Room3D_door_outside.Room3D_door_open div.Room3D_door_single.Room3D_door_right {
    transform: rotateY(-90deg)
}

.Room3D_door div.Room3D_door_double {
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: left center 0
}

.Room3D_door div.Room3D_door_double_rt {
    left: auto;
    right: 0;
    transform-origin: right center 0
}

.Room3D_door.Room3D_door_inside.Room3D_door_open div.Room3D_door_double.Room3D_door_double_lf {
    transform: rotateY(-90deg)
}

.Room3D_door.Room3D_door_inside.Room3D_door_open div.Room3D_door_double.Room3D_door_double_rt {
    transform: rotateY(90deg)
}

.Room3D_door.Room3D_door_outside.Room3D_door_open div.Room3D_door_double.Room3D_door_double_lf {
    transform: rotateY(90deg)
}

.Room3D_door.Room3D_door_outside.Room3D_door_open div.Room3D_door_double.Room3D_door_double_rt {
    transform: rotateY(-90deg)
}

.Room3D_line {
    position: absolute;
    display: block;
    border-style: dashed;
    border-width: 0;
    transform-style: preserve-3d
}

.Room3D_line>span {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    border-style: dashed;
    border-width: 0
}

.Room3D_line_left_hori {
    height: 100%;
    top: 0;
    left: 0
}

.Room3D_line_left_hori>span {
    top: 0;
    transform: rotateY(90deg)
}

.Room3D_line_fore_hori {
    width: 100%;
    bottom: 0;
    left: 0
}

.Room3D_line_fore_hori>span {
    left: 0;
    transform: rotateX(90deg)
}

.Room3D_line_right_hori {
    height: 100%;
    top: 0;
    right: 0
}

.Room3D_line_right_hori>span {
    top: 0;
    transform: rotateY(90deg)
}

.Room3D_line_back_hori {
    width: 100%;
    top: 0;
    left: 0
}

.Room3D_line_back_hori>span {
    left: 0;
    transform: rotateX(90deg)
}

.Room3D_line_left_vert {
    top: 0;
    left: 0;
    transform-origin: 0 0;
    transform: rotateY(-90deg)
}

.Room3D_line_left_vert>span {
    left: 0;
    transform: rotateX(90deg)
}

.Room3D_line_fore_vert {
    bottom: 0;
    left: 0;
    transform-origin: 0 0;
    transform: rotateY(-90deg)
}

.Room3D_line_fore_vert>span {
    left: 0;
    transform: rotateX(90deg)
}

.Room3D_line_right_vert {
    bottom: 0;
    right: 0;
    transform-origin: 100% 0 0;
    transform: rotateY(90deg)
}

.Room3D_line_right_vert>span {
    left: 0;
    transform: rotateX(90deg)
}

.Room3D_line_back_vert {
    top: 0;
    right: 0;
    transform-origin: 100% 0 0;
    transform: rotateY(90deg)
}

.Room3D_line_back_vert>span {
    left: 0;
    transform: rotateX(90deg)
}

.Box3D_box {
    position: absolute;
    transform-style: preserve-3d
}

.Box3D_side {
    position: absolute
}

.Box3D_side>div {
    width: 100%;
    height: 100%
}

.Box3D_side>div>span {
    display: block;
    width: 100%;
    height: 100%;
    border-style: solid
}

.Box3D_bottom {
    width: 100%;
    height: 100%
}

.Box3D_bottom>div {
    background: rgba(0,0,0,.2)
}

.Box3D_left {
    top: 0;
    left: 0;
    height: 100%;
    transform-origin: 0 0;
    transform: rotateY(-90deg)
}

.Box3D_left>div {
    background: rgba(0,0,0,.3)
}

.Box3D_right {
    top: 0;
    right: 0;
    height: 100%;
    transform-origin: 100% 0 0;
    transform: rotateY(90deg)
}

.Box3D_right>div {
    background: rgba(0,0,0,.1)
}

.Box3D_fore {
    bottom: 0;
    left: 0;
    width: 100%;
    transform-origin: 0 100% 0;
    transform: rotateX(-90deg)
}

.Box3D_fore>div {
    background: rgba(0,0,0,.0)
}

.Box3D_back {
    top: 0;
    left: 0;
    width: 100%;
    transform-origin: 0 0;
    transform: rotateX(90deg)
}

.Box3D_back>div {
    background: rgba(0,0,0,.4)
}

.Box3D_top {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: 0 0
}

.Box3D_top>div {
    background: rgba(0,0,0,.2)
}

.Marker3D_marker {
    display: inline-block;
    position: absolute;
    transform-style: preserve-3d
}

.Marker3D_content {
    display: inline-block;
    transform-origin: center center 0;
    line-height: 1.2em;
    padding: 2px;
    border-radius: 2px
}

.Marker3D_line {
    display: block;
    height: 1px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform-origin: left center 0;
    transform-style: preserve-3d
}

.Marker3D_line>span {
    display: block;
    width: 100%;
    height: 100%;
    transform: rotateX(90deg);
    transform-origin: center center 0
}
